<template>
	<div id="index">
		<router-view></router-view>
		<nav>
			<div class="nav_item" v-for="(item,index) in navList" @click="goPage(item.path,index)" :key="index">
				<img v-show="index !== navInd" :src="item.url" alt="">
				<img v-show="index == navInd" :src="item.url_a" alt="">
				<div class="nav_label" :class="index == navInd ? 'nav_active' : ''">{{item.name}}</div>
			</div>
		</nav>
	</div>
</template>

<script>
export default {
	data() {
		return {
			navInd: -1,
			navList: [
				{
					path:"/home",
					name:"首页",
					url:require("@/assets/nav/home.png"),
					url_a:require("@/assets/nav/home_a.png")
				},{
					path:"/car",
					name:"车辆",
					url:require("@/assets/nav/car.png"),
					url_a:require("@/assets/nav/car_a.png")
				},{
					path:"/order",
					name:"订单",
					url:require("@/assets/nav/order.png"),
					url_a:require("@/assets/nav/order_a.png")
				},{
					path:"/finance",
					name:"财务",
					url:require("@/assets/nav/finance.png"),
					url_a:require("@/assets/nav/finance_a.png")
				}
			]
		}
	},
	created(){
		let ind = JSON.parse(localStorage.getItem('navInd'));
		this.navInd = ind;
		this.$router.push(this.navList[ind].path);
	},
	methods: {
		goPage(path,index) {
			if(this.navInd !== index){
				localStorage.setItem('navInd', index);
				this.navInd = index;
				this.$router.push(path);
			}
		}
	},
	watch: {
		$route() {
			switch (this.$route.path) {
				case '/home':
					this.navInd = 0;
					break
				case '/car':
					this.navInd = 1;
					break
				case '/order':
					this.navInd = 2;
					break
				case '/finance':
					this.navInd = 3;
					break
				default:
					this.navInd = -1;
					break
			}
		}
	}
};
</script>

<style>
	.mini-confirm{
		width: 6rem;
	}
</style>
<style scoped lang="scss">
@import '@/assets/css/common.css';
#index{ height: 100%; }
nav{
	width: 100%;
	background: #fff;
	height: 1.2rem;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-around;
	padding: .1rem 0;

	.nav_item img{
		width: .8rem;
		height: .8rem;
	}
	.nav_label{
		text-align: center;
		color: #666666;
	}
	.nav_active{
		color: #2c76fc;
	}
}
	/* 橙色 ff4400*/
</style>
